<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/managementLayout.css">
    <script src="${pageContext.request.contextPath}/js/jquery1.12.4.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/js/monitor.js"></script>
    <script src="${pageContext.request.contextPath}/js/slider.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/js/axios.min.js"></script>
    <title>后台权限管理系统</title>

</head>

<body>

<div id="container">
    <section class="public-main">

    <jsp:include page="NavigationUtil.jsp" flush="true"></jsp:include>
        <!-- 主体部分 -->

        <div class="public-main-right">

            <header class="nav-wrapper">
                <div class="main-right-header">

                    <div class="location">
                        <strong>订单管理</strong>
                        <span>订单退款</span>
                    </div>

                    <div class='main-right-header-right'>

                            <span class="">
                                超级管理员：李艳卿 Chelsea
                            </span>

                        <span class="">
                            <a href="#"><img src="img/head.jpg" style="width: 25px"></a>
                        </span>
                        <span class=""><a href="login.html">退出登录</a></span>
                    </div>

                </div>
            </header>

            <form action="/orderDetailList">
                <div class="search">
                    <span>用户名:</span>
                    <input type="text" name="uname" placeholder="请输入用户名" value="${uname}" />

                    <span>课程名称:</span>
                    <input type="text"name="cName"  placeholder="请输入课程名称" value="${cName}" />

                    <input class="btn btn-primary" type="submit" value="搜索" />
                    <input type="button" @click="resetList" value="重置" />
                    <!-- <a href="#" @click="addCourse">增加课程</a> -->
                </div>
            </form>
            <!-- 主体搜索及增加框 -->
            <div class='main-right-content'>
                <!-- 以下容器均可修改，原有id和class别动，否则样式会变 -->

                <table class="providerTable" cellpadding="1" cellspacing="1">
                    <tr class="firstTr">
                        <th width="5%">订单号</th>
                        <th width="15%">用户名</th>
                        <th width="15%">课程名称</th>
                        <th width="20%">购买时间</th>
                        <th width="10%">价格</th>
                        <th width="10%">订单状态</th>
                        <th width="10%">操作</th>
                    </tr>
                    <c:forEach items="${pageInfo.list}" var="orderDetail">
                        <tr>
                            <td>${orderDetail.orders.oId}</td>
                            <td>${orderDetail.orders.user.uname}</td>
                            <td>${orderDetail.course.cName}</td>
                            <td>
                                <fmt:formatDate value="${orderDetail.orders.buyingTime}" pattern="yyyy-MM-dd"></fmt:formatDate>
                            </td>
                            <td>${orderDetail.orders.totals}</td>
                            <td>
                                <c:if test="${orderDetail.orders.orderStatus==1}">
                                    已支付
                                </c:if>
                                <c:if test="${orderDetail.orders.orderStatus==2}">
                                    待支付
                                </c:if>
                                <c:if test="${orderDetail.orders.orderStatus==3}">
                                    已退款
                                </c:if>
                                <c:if test="${orderDetail.orders.orderStatus==4}">
                                    退款中
                                </c:if>
                            </td>
                            <td>
                                <a href="#" @click="findByOid(${orderDetail.orders.oId})" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-jpy"></span></a>
                            </td>
                        </tr>

                    </c:forEach>
                </table>
                <div>
                    当前第${pageInfo.pageNum}页,共${pageInfo.pages}页,共${pageInfo.total}条
                </div>
                <nav aria-label="Page navigation" class="text-center">
                    <ul class="pagination">
                        <c:if test="${pageInfo.hasPreviousPage}">
                            <li>
                                <a href="/orderDetailList?uname=${uname}&cName=${cName}&page=${pageInfo.pageNum-1}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        </c:if>
                        <c:forEach items="${pageInfo.navigatepageNums}" var="page">
                            <c:if test="${pageInfo.pageNum == page}">
                                <li class="active"><a href="/orderDetailList?uname=${uname}&cName=${cName}&page=${page}">${page}</a></li>
                            </c:if>
                            <c:if test="${pageInfo.pageNum != page}">
                                <li><a href="/orderDetailList?uname=${uname}&cName=${cName}&page=${page}">${page}</a></li>
                            </c:if>

                        </c:forEach>
                        <c:if test="${pageInfo.hasNextPage}">
                            <li>
                                <a href="/orderDetailList?uname=${uname}&cName=${cName}&page=${pageInfo.pageNum+1}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </c:if>

                    </ul>
                </nav>


                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">退款确认</h4>
                            </div>
                            <div class="modal-body">
                                <div class="tableList">
                                    <form action="#">
                                        <div class="">
                                            <label >订单号：</label>
                                            <span style="color: black">{{orderDetail.orders.oId}}</span>
                                        </div>
                                        <div class="">
                                            <label >用户名：</label>
                                            <span style="color: black">{{orderDetail.orders.user.uname}}</span>
                                        </div>
                                        <div class="">
                                            <label >课程名称：</label>
                                            <span style="color: black">{{orderDetail.course.cName}}</span>
                                        </div>
                                        <div class="">
                                            <label >购买时间：</label>
                                            <span style="color: black">
                                                {{orderDetail.orders.buyingTime}}
                                            </span>
                                        </div>
                                        <div class="">
                                            <label >价格：</label>
                                            <span style="color: black">{{orderDetail.orders.totals}}</span>
                                        </div>
                                        <div class="">
                                            <label >订单状态：</label>
                                            <span style="color: black" v-if="orderDetail.orders.orderStatus=='1'">
                                                已支付
                                            </span>
                                            <span style="color: black" v-if="orderDetail.orders.orderStatus=='2'">
                                                待支付
                                            </span>
                                            <span style="color: black" v-if="orderDetail.orders.orderStatus=='3'">
                                                已退款
                                            </span>
                                            <span style="color: black" v-if="orderDetail.orders.orderStatus=='4'">
                                                退款中
                                            </span>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" data-dismiss="modal" @click="refundMoney(orderDetail.orders.oId)">确认退款</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <footer>
                打牛蛙组教育集团
            </footer>
        </div>
    </section>

</div>




<!-- 每一页需加上slider，否则js动效无法显示 -->
<script src="js/slider.js"></script>
<!-- 每一页需加上slider，否则js动效无法显示 -->

<script type="text/javascript">
    // 模态框触发
    new Vue({
        el: ".public-main-right",
        data:{
            orderDetail: {
                dId: "",
                course: {cId: "", cName: ""},
                orders: {oId: "", user: {userId: "", uname: ""}, totals: "", orderStatus: "", buyingTime: ""}
            }
        },
        methods: {
            addCourse: function() {
                $('#myModal').modal("show");
            },
            resetList:function () {
                axios.post("/orderDetailList")
                    .then(function () {
                        window.location.href="/orderDetailList"
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            },
            findByOid:function (oid) {

                var _this = this;
                axios.get('/findByOid', {
                    params: {
                        oid: oid
                    }
                })
                .then(function (response) {
                    // console.log("1")
                    // window.location.href="/wappay/refund.jsp"
                    _this.orderDetail = response.data;
                })
                    .catch(function (error) {
                        console.log(error)
                    });
            },
            refundMoney:function (oid) {
                console.log(oid)
                var _this=this;
                axios.get('/updateOrderStatus',{
                    params: {
                        oid:oid
                    }
                })
                .then(function () {
                    window.location.href="/orderDetailList"
                })
                .catch(function (error) {
                    console.log(error)
                })
            }
        }
    });
</script>
</body>

</html>